<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片区域 -->
    <el-card>
      <!-- 添加分类 -->
      <el-button type="warning" plain>添加分类</el-button>

      <!-- 渲染分类区域 -->
      <!-- data指代用来展示的数据 -->
      <!-- columns指代的是每一列，其值是一个数组，数组包含两项label：指代该列名称，prop指代的是数据中对应该名称的变量名 -->
      <!-- selection-type指代的是是否取消之前的选择框 （默认展示）-->
      <!-- expand-type指代是否展示扩展列（默认展示） -->
      <!-- show-index指代是否展示索引列（默认不展示） -->
      <!-- index-text指代的是索引的名称 -->
      <!-- border指代是否有边框 -->
      <tree-table
        :data="cateList"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        :show-index="true"
        index-text="#"
        border
      >
        <template slot="isOk" slot-scope="scope">
          <i class="el-icon-success" style="color:lightgreen" v-if="scope.row.cat_deleted===false"></i>
          <i class="el-icon-error" style=" color:red" v-else></i>
        </template>

        <template slot="order" slot-scope="scope">
          <el-tag type="success" v-if="scope.row.cat_level===0">一级</el-tag>
          <el-tag type="warning" v-else-if="scope.row.cat_level===1">标签四</el-tag>
          <el-tag type="danger" v-else>标签五</el-tag>
        </template>

        <template slot="option">
          <el-button size="mini" type="warning" plain icon="el-icon-edit">编辑</el-button>
          <el-button size="mini" type="danger" plain icon="el-icon-delete">删除</el-button>
        </template>
      </tree-table>

      <!-- 分页区域 -->
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'categories',
  data() {
    return {
      // 请求参数
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 10
      },
      // 存储商品分类的数据
      cateList: [],
      // 分类请求的列表
      total: 0,
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name'
        },
        {
          label: '是否有效',
          type: 'template',
          template: 'isOk'
        },
        {
          label: '排序',
          type: 'template',
          template: 'order'
        },
        {
          label: '操作',
          type: 'template',
          template: 'option'
        }
      ]
    }
  },
  methods: {
    // 获取商品分类的数据
    async getCateList() {
      const { data: res } = await this.$http.get('/categories', {
        params: this.queryInfo
      })
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.cateList = res.data.result
      this.total = res.data.total
      // console.log(this.cateList, this.total)
    }
  },
  created() {
    this.getCateList()
  }
}
</script>

<style lang="less" scoped>
.zk-table {
  margin-top: 20px;
}
</style>
